<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax+PHP实现文件异步上传</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="js/jquery.min.js"></script>
        <style type="text/css">
        .file {
            position: relative;
            display: inline-block;
            border: 1px solid #1ab294;
            border-radius: 4px;
            padding: 8px 16px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            color: #1ab294;
            }
            
            .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            }
            .box{
            margin-top: 10px;
            text-align: center;
            }
            .box a{
            margin-left: 10px;
            }
    </style>
</head>
<body> 
        <div class="box">
            <a href="javascript:;" class="file">选择文件
                <input type="file" multiple="multiple" id="inputfile" name="" class="photo">
            </a>
        </div>

<script type="text/javascript">
	$(document).ready(function(){
	    $("#inputfile").change(function(){
	        //创建FormData对象
	        var data = new FormData();
	        //为FormData对象添加数据
	        $.each($('#inputfile')[0].files, function(i, file) {
	            data.append('upload_file'+i, file);
	        });
	        //发送数据
	        $.ajax({
	            url:'up.php', /*提交的地址*/
	            type:'POST',  /*提交方式*/
	            data:data,
	            cache: false,
	            contentType: false,        /*不可缺*/
	            processData: false,         /*不可缺*/
	            success:function(data){
	               if(data == 1){
	               		alert('success');
	               }else{
	               		alert('faile');
	               }
	            },
	            error:function(){
	                alert('上传出错');
	            }
	        });
	    });
	});
</script>
</body>
</html>